<template>
    <div style="max-width: 450px; margin: 0 auto;">
        <div style="background-color: #008CA0; height: 3.5rem;"></div>
        <div>
            <van-nav-bar
            title="收件地址"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        </div>
        <van-form>
                <van-cell-group inset>
                    <van-field
                    v-model="userInfo.username"
                    name="用户名"
                    label="用户名"
                    placeholder="请输入用户名"
                    />
                    <van-field
                    v-model="userInfo.email"
                    name="邮箱"
                    label="邮箱"
                    placeholder="请输入邮箱"
                    />
                    <van-field
                    v-model="userInfo.tel"
                    name="电话"
                    label="电话"
                    placeholder="电话"
                    />
                    <van-field
                    v-model="userInfo.province"
                    name="省份"
                    label="省份"
                    placeholder="请输入省份"
                    />
                    <van-field
                    v-model="userInfo.city"
                    name="市/区"
                    label="市"
                    placeholder="请输入市"
                    />
                    <van-field
                    v-model="userInfo.county"
                    name="县/区"
                    label="县/区"
                    placeholder="请输入县/区"
                    />
                    <van-field
                    v-model="userInfo.detail"
                    name="详细地址"
                    label="详细地址"
                    placeholder="请输入详细地址"
                    />
                    <van-field
                    v-model="userInfo.verify"
                    name="校验码"
                    label="校验码"
                    placeholder="校验码"
                    :rules="[{ required: true, message: '请填写校验码' }]"
                    />
                </van-cell-group>
                <div style="text-align: center; margin: 1rem auto;">
                    <VerificationCode/>
                </div>
                <div style="height: 2rem; text-align: center; color: red;">
                    <span v-if="msg">{{ msg }}</span>
                </div>
                <div style="text-align: center; margin: 0 auto;">
                    <van-button style="width: 15rem;" type="primary" size="small" @click="subRegister">提交</van-button>
                </div>
        </van-form>
    </div>
</template>


<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { userBuyNow,getUserInfo,updateUserInfo } from "@/requests";
import VerificationCode from '@/views/VerificationCode.vue';
const msg = ref();
const router = useRouter();
const userInfo = reactive({
    id: "",
    username: '',
    tel: '',
    email: '',
    province: "",
    city: "",
    county: "",
    detail: "",
});

const foruserInfo = async () => {
    const res = await getUserInfo();
    if (res.status === 2000) {
        const data = res.data;
        userInfo.id = data.id;
        userInfo.username = data.username;
        userInfo.tel = data.tel;
        userInfo.email = data.email;
        userInfo.province = data.province;
        userInfo.city = data.city;
        userInfo.county = data.county;
        userInfo.detail = data.detail;
    } else {
        console.log("用户未登录")
    }
};
foruserInfo();


const subRegister = async()=>{
    const verify = window.localStorage.getItem("verify");
    if (verify !== userInfo.verify ) {
        msg.value = "验证码错误"
        return;
    };
    const res = await updateUserInfo(userInfo);
    if (res.status === 2000){
        msg.value = "更新成功";
        router.push({path: '/m/user'})
    }else{
        msg.value = "更新失败";
    }
}


const onClickLeft = () => history.back();
</script>